<!--- Custom tag for Flexigrid/jQuery --->
<!---
WRITTEN BY: Michael Sprague, msprague@hamilton.edu
VERSION: 0.7 (beta 1)
UPDATED: 7/29/2008

USAGE: 
	<cf_grid name="firstattempt"  - must be unique (required)
			bind="cfc:test.cfm" - *see below, path to ajax file that returns JSON data, can only use cfC: prefix as of version 1 (optional, must specify this or query)	
			query="#queryname#" - use only for non-ajax grids, limited functionality (optional)
			title="Employees" - title for top of grid (optional)
			numrowsselector="true"  - Show the option to change number of results displayed (optional)
			numrows="10" - Rows per page (optional)
			buttonArray="" - JS Array for buttons in top bar.  See below.
			paging="true" - Use paging navigation bar (optional)
			sortcolumn="lastname" - Default sort column (required)
			sortdir="asc" - Default sort direction (optional)
			width="auto" - auto or pixel amount (optional)
			height="200" - pixel amount only, default 200 (optional)
			striped="true" - stripe alternating rows (optional)
			resizable="true" - allow resizing of grid, default true (optional)
			showColumnToggle="true"  - show toggling box in row headers (optional)
			rowClick="navTo({key});" - Functions only: Use {key} for identifier, no quotes around (optional)
			pathTojQuery="/js/jQuery126-min.js" - path to the jQuery library (optional)
			pathToFlexigrid="/js/flexigrid.js" - path to the Flexigrid JS file (optional)
			pathToFlexigridCSS="/js/flexigrid/flexigrid.css" - path to the flexigrid CSS file (must include images folder in same folder) (optional)
			>
		<cf_gridcolumn name="id" header="The ID" hide="true" />
		<cf_gridcolumn name="firstname" header="First Name" searchable="true" />
		<cf_gridcolumn name="lastname" header="Last Name" searchable="true" />
	</cf_grid>

* REMOTE DATA CALLS
	1. Several form variables are always present in the Ajax call for data
	form.query = The search string entered by the user.
	form.qtype = The column the user selected for search
	form.sortname = column to sort on
	form.sortorder = ascending or descending order
	form.page = current page number
	form.rp = results per page
	
	2. Remote data calls require the returned data to be in a specialized JSON format.  The cf_gridconvert tag will handle this for you.  
	
	Example...
	<cfquery name="getStaff" datasource="mydsn">
		SELECT id,firstname,lastname FROM staff
		<cfif form.query GT "">  <!--- for the search box --->
			WHERE #form.qtype# LIKE '%#form.query#%'
		</cfif>
		ORDER BY #form.sortname# #form.sortorder#
	</cfquery>
	<!--- convert and output.  For displayCols argument, always include primary key first --->
	<cf_gridconvert query="#getStaff#" columns="id,firstname,lastname" page="#form.page#" resultsper="#form.rp#" />
	


BUTTON ARRAY (optional)
	If you want to add buttons to the top toolbar, pass in a JavaScript array formatted as follows:
	 
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
	
	You will then need corresponding CSS and JavaScript functions for the buttons in your CFM file, for example:
	
		<style>
	        .flexigrid div.fbutton .add
	            {
	                background: url(css/images/add.png) no-repeat center left;
	            }
	        .flexigrid div.fbutton .delete
	            {
	                background: url(css/images/close.png) no-repeat center left;
	            }	
	    </style>
	
		
		<script language="javascript" type="text/javascript">
			test = function() {
				window.alert('test');
				}
		</script>

--->


<cfswitch expression="#ThisTag.ExecutionMode#">
	<!--- Start tag processing --->
	<cfcase value="start">
		<cfparam name="attributes.name" default="grid1" />
		<cfparam name="attributes.query" default="" />
		<cfparam name="attributes.bind" default="" />
		<cfparam name="attributes.title" default="" />
		<cfparam name="attributes.numrowsselector" default="true" />
		<cfparam name="attributes.numrows" default="15" />
		<cfparam name="attributes.paging" default="true" />
		<cfparam name="attributes.sortcolumn" default="" />
		<cfparam name="attributes.sortdirection" default="" />
		<cfparam name="attributes.width" default="auto" />
		<cfparam name="attributes.height" default="200" />
		<cfparam name="attributes.striped" default="true" />
		<cfparam name="attributes.resizable" default="true" />
		<cfparam name="attributes.showColumnToggle" default="true" />
		<cfparam name="attributes.rowClick" default="" />
		<cfparam name="attributes.pathTojQuery" default="/js/jQuery126-min.js" />
		<cfparam name="attributes.pathToFlexigrid" default="/js/flexigrid.pack.js" />
		<cfparam name="attributes.pathToFlexigridCSS" default="/js/flexigrid/flexigrid.css" />
		<cfparam name="caller.hasColumn" default="0" />
		<cfparam name="caller.cols" default="" />
		<cfparam name="caller.jQueryIncluded" default="0" />
		<cfparam name="caller.fGridIncluded" default="0" />
		<!--- bind setup --->
		<cfset bindtype = gettoken(attributes.bind,1,":") />
		<cfset bindpath = gettoken(attributes.bind,2,":") />
		<cfif NOT caller.jQueryIncluded>
			<script src='<cfoutput>#attributes.pathTojQuery#</cfoutput>' type='text/javascript'></script>
			<cfset caller.jQueryIncluded = 1 />
		</cfif>
		<cfif NOT caller.fGridIncluded>
		<link rel="stylesheet" type="text/css" href="<cfoutput>#attributes.pathToFlexigridCSS#</cfoutput>">
		<script type="text/javascript" src="<cfoutput>#attributes.pathToFlexigrid#</cfoutput>"></script>
		<cfset caller.fGridIncluded = 1 />
		</cfif>
		<cfif attributes.rowclick GT "">
		<script language="javascript" type="text/javascript">
			function linkto() {
				$('#<cfoutput>#attributes.name#</cfoutput> tbody tr').each(
			        function () {
			            $(this)
			            .click(
			                function (e)
			                    {
			                        var trueid = this.id.replace('row','');
			                        <cfoutput>#replace(attributes.rowClick,"{key}","trueid")#</cfoutput>
			                    }
			            )
			        }
			    );
			}
		</script>
		</cfif>
		
		<cfif isQuery(attributes.query)>
			<cfset caller.gridtype = "query" />
			<table class="<cfoutput>#attributes.name#</cfoutput>">
				<thead>
				<tr>
		<cfelse>
			<cfset caller.gridtype = "ajax" />
			<table id="<cfoutput>#attributes.name#</cfoutput>" style="display:none"></table>
		
			<script type="text/javascript">
		
				$("#<cfoutput>#attributes.name#</cfoutput>").flexigrid
					(
					{
					url: <cfif attributes.bind GT "">'<cfoutput>#bindpath#</cfoutput>'<cfelse>false</cfif>,
					dataType: 'json',
					colModel : [			
		</cfif>
		
		
	</cfcase>
	<!--- End tag processing --->
	<cfcase value="end">
		<cfif IsQuery(attributes.query)>
			</tr></thead>
			<tbody>
				<cfoutput query="attributes.query">
					<tr><cfloop list="#caller.cols#" index="curcol"><td>#evaluate('attributes.query.#curcol#')#</td></cfloop></tr>
				</cfoutput>
			</tbody>
			</table>
			<script language="javascript" type="text/javascript">
				$(".<cfoutput>#attributes.name#</cfoutput>").flexigrid();
			</script>
		<cfelse>
		],
				searchitems : [
					<cfset loopcount = 1 />
					<cfloop list="#caller.searchablecols#" index="ccol">
					{display: '<cfoutput><cfif getToken(caller.searchablecolsnames,loopcount) NEQ "">#getToken(caller.searchablecolsnames,loopcount,',')#<cfelse>#ccol#</cfif></cfoutput>', name : '<cfoutput>#ccol#</cfoutput>'<cfif loopcount IS 1>, isdefault: true</cfif>}
					<cfif ccol NEQ listlast(caller.searchablecols)>,</cfif>
					<cfset loopcount=loopcount+1 />
					</cfloop>
					],
				<cfif attributes.buttonArray GT "">
				buttons : [
					<cfoutput>#attributes.buttonArray#</cfoutput>
					],
				</cfif>
				sortname: "<cfoutput>#JSStringFormat(attributes.sortcolumn)#</cfoutput>",
				sortorder: "<cfoutput>#JSStringFormat(attributes.sortdirection)#</cfoutput>",
				usepager: <cfoutput>#JSStringFormat(attributes.paging)#</cfoutput>,
				title: '<cfoutput>#JSStringformat(attributes.title)#</cfoutput>',
				useRp: <cfoutput>#JSStringFormat(attributes.numrowsselector)#</cfoutput>,
				rp: <cfoutput>#JSStringFormat(attributes.numrows)#</cfoutput>,
				showTableToggleBtn: true,
				width: <cfoutput><cfif attributes.width IS "auto">"auto"<cfelse>#JSStringFormat(attributes.width)#</cfif></cfoutput>,
				//onSubmit: addFormData,
				<cfif attributes.rowClick GT "">onSuccess: linkto,</cfif>				
				striped: <cfoutput>#attributes.striped#</cfoutput>,
				resizable: <cfoutput>#attributes.resizable#</cfoutput>,
				showToggleBtn: <cfoutput>#attributes.showColumnToggle#</cfoutput>,
				height: <cfoutput>#JSStringFormat(attributes.height)#</cfoutput>
				}
				);
		</script>
		</cfif>
	</cfcase>
</cfswitch>